<template>
  <div class="login-page">
    <img class="bgone" src="@/assets/1705040415345321.jpg">
    <img class="pic" src="@/assets/a.png">
    <div class="table">
      <div class="wel">全流程智能化审判监督平台--后台管理系统</div>
      <div class="user">
        <div id="yonghu" style=""><img src="@/assets/yhm.png"></div>
        <input type="text" name="" placeholder="请输入用户名" v-model="userForm.username">
      </div>
      <div class="password">
        <div id="yonghu"><img src="@/assets/mm.png"></div>
        <input type="password" name="密码" placeholder="请输入密码" v-model="userForm.password">
      </div>
      <input class="btn" type="button" name="登录" value="登录" @click="handleLogin">
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import axios from "axios";

export default {
  data() {
    return {
      loading: false,
      // 登录信息
      userForm: {
        username: '',
        password: ''
      },
    }
  },
  mounted() {

  },
  methods: {
    handleLogin() {
      if (this.userForm.username === '') {
        this.alertError('用户名不能为空!')
        return
      }
      if (this.userForm.password === '') {
        this.alertError('密码不能为空!')
        return
      }
      if (this.userForm.username !== 'admin') {
        this.alertError('该账号不存在!')
        return
      }
      if (this.userForm.username === 'admin' && this.userForm.password !== '123') {
        this.alertError('密码输入有误!')
        return
      }
      this.$router.push({path: '/user'});
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
  }
}
</script>

<style scoped>

.btn {
  position: absolute;
  cursor: pointer;
  top: 18.5rem;
  right: 3.9rem;
  border: none;
  color: #fff;
  width: 373px;
  text-align: center;
  background-color: #1592ef;
  text-indent: 0rem;
  border-radius: 10px;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  height: 50px;
}

#yonghu img {
  height: 30px;
  position: absolute;
  left: 10px;
  top: 13px;
}

input {
  height: 55px;
  width: 373px;
  text-indent: 55px;
  outline: none;
  background: #eef6fd;
  border-bottom: 2px #d6e7fa solid;
}

input[type="text" i] {
  padding-block: 1px;
  padding-inline: 2px;
}

.user {
  position: absolute;
  top: 7.8rem;
  right: 4rem;
  display: flex;
}

.password {
  position: absolute;
  top: 12.8rem;
  right: 4rem;
  display: flex;
}

.wel1 {
  width: 960px;
  height: 35px;
  color: #fff;
  font-size: 12.38px;
  position: absolute;
  top: -4rem;
  text-align: center;
}

.wel {
  width: 960px;
  height: 35px;
  color: #fff;
  font-size: 30px;
  position: absolute;
  top: -7rem;
  text-align: center;
}


.pic {
  width: 492px;
  height: auto;
  position: absolute;
  top: 173px;
  right: 453px;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 99999;
}

.table {
  background-color: #FFFFFF;
  width: 960px;
  height: 465px;
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}


* {
  font-family: "微软雅黑";
  font-size: 16px;
  border: 0;
  padding: 0;
  margin: 0;
  color: #666;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.bgone {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/*.login-page {
  height: 100vh;
  background: url('@/assets/1705040415345321.jpg') center no-repeat;
  background-size: cover;
}*/

</style>